<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="content" style="width: 200px; height: 200px;border: 1px solid red">

</div>
<script>
    /*
        requestAnimationFrame()
          每秒60桢,这个是一帧一帧的画的
          目前所有浏览器都支持
          方法接收一个参数,此参数是一个要在重绘屏幕前调用的函数
          ?? 目前还不知道怎么用
          在主线程中执行
     */

    let count = 0;

    function addWidth() {
        const divDom = document.querySelector('.content')
        const width = divDom.style.width.slice(0, -2)
        const toWidth = width*1 + 10;
        divDom.style.width = toWidth + 'px'
        if (toWidth < 1000) {
            count ++;
            console.log('count:',count)
            requestAnimationFrame(addWidth)
        }
       
    }
    addWidth()
</script>
</body>
</html>